<template>
  <div class="index-box">
    <!-- 左侧 -->
    <div class="contetn_left">
      <ItemWrap class="contetn_lr-item1" title="大瓦特智能交互问答">
        <ChatView
      /></ItemWrap>
      <ItemWrap class="contetn_lr-item11" title="智能体运行日志">
        <LeftBottom
      /></ItemWrap>
    </div>

    <!-- 中间 -->
    <div class="contetn_center">
      <div class="toptitle">
        <div class="toptitleleft"></div>
        <div class="toptitlecontent">风控分析AI员工</div>
      </div>
      <!-- 统计 -->
      <!-- 数据统计 -->
      <div class="rightTop">
        <div class="rightTop-title">贵阳供电局今日作业总览</div>

        <div class="top111">
          <div class="rightTopItem">
            <div class="rightTopItemTitle">作业总数</div>
            <div class="linetop"></div>
            <div class="rightTopItemContent">
              <CountUp :endVal="20" :duration="duration" />
            </div>
          </div>
          
          <div class="rightTopItem">
            <div class="rightTopItemTitle">特高风险</div>
            <div class="linetop"></div>
            <div class="rightTopItemContent">
              <CountUp :endVal="20" :duration="duration" />
            </div>
          </div>

          <div class="rightTopItem">
            <div class="rightTopItemTitle">高风险</div>
            <div class="linetop"></div>
            <div class="rightTopItemContent">
              <CountUp :endVal="20" :duration="duration" />
            </div>
          </div>

          <div class="rightTopItem">
            <div class="rightTopItemTitle">中风险</div>
            <div class="linetop"></div>
            <div class="rightTopItemContent">
              <CountUp :endVal="20" :duration="duration" />
            </div>
          </div>

          <div class="rightTopItem">
            <div class="rightTopItemTitle">低风险</div>
            <div class="linetop"></div>
            <div class="rightTopItemContent">
              <CountUp :endVal="20" :duration="duration" />
            </div>
          </div>

          <div class="rightTopItem">
            <div class="rightTopItemTitle">可接受风险</div>
            <div class="linetop"></div>
            <div class="rightTopItemContent">
              <CountUp :endVal="20" :duration="duration" />
            </div>
          </div>
        </div>

        <div class="topmap">
          <Map />
        </div>
      </div>

      <!-- <div class="bottom">
        <ItemWrap class="contetn_center-bottom4" title="工单类型分布" :isSmall="true">
          <LeftChart />
        </ItemWrap>

        <ItemWrap
          class="contetn_center-bottom5"
          title="责任人签收/处理工单分布"
          :isSmall="true"
        >
          <CenterChart />
        </ItemWrap>

      </div> -->
    </div>

    <!-- 右侧 -->
    <div class="contetn_right">
      
      <el-radio-group style="margin-left: 8px;" v-model="leftRadio1" fill="#02a6ef">
        <el-radio-button label="外单位" value="外单位" />
        <el-radio-button label="本单位" value="本单位" />
      </el-radio-group>
      

      <ItemWrap class="contetn_lr-item3" title="作业辅助识别">
        <SecondProgress :data="progressData" />
      </ItemWrap>

      <ItemWrap class="contetn_lr-item3" title="辅助录入违章单">
        <SecondChart :data="chartData" />
      </ItemWrap>

      <div class="contetn_right-title">
        <el-radio-group v-model="leftRadio2" fill="#02a6ef">
          <el-radio-button label="已识别的违章清单" value="已识别的违章清单" />
          <el-radio-button label="未完全监看视频" value="未完全监看视频" />
        </el-radio-group>
      </div>

      <ItemWrap class="contetn_lr-item3" title="">
        <Table :data="progressData" v-if="leftRadio2 === '已识别的违章清单'" />
        <Table2 :data="chartData" v-else />
      </ItemWrap>
    </div>

    <el-dialog
      v-model="dialogVisible"
      width="350"
      align-center
      @close="onCloseType"
      :z-index="99999999"
    >
    <div class="dial-title">
      登录视频作业监控平台
    </div>
    <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
  >
    <el-form-item label="账号" prop="name" :required="false">
      <el-input v-model="ruleForm.name" />
    </el-form-item>

    <el-form-item label="密码" prop="passwerd" show-password>
      <el-input v-model="ruleForm.passwerd" />
    </el-form-item>
    </el-form>

    <div class="dial-sub">
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        提交
      </el-button>
    </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, reactive, watch, onMounted } from "vue";
import ItemWrap from "@/components/item-wrap";
import CountUp from "@/components/count-up";
import Table from "../components/Table";
import Table2 from "../components/Table2";
import LeftChart from "../components/LeftChart";
import CenterChart from "../components/CenterChart";
import ChatView from "../components/ChatView";
import SecondChart from "../components/SecondChart";
import SecondProgress from "../components/SecondProgress";
import Map from "../components/Map";
import LeftBottom from "../components/LeftBottom";
import { useSettingStore } from "@/stores/index";
import { storeToRefs } from "pinia";
import dayjs from "dayjs";
import { marked } from "marked";
import { ranking, tableApi } from "@/api";
import assert from "assert";
import { ElMessage, FormInstance, FormRules } from "element-plus";

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<any>({
  name: '',
  passwerd: '',
})

const rules = reactive<FormRules<any>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  })

  const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}


const progressData = ref([
      {
        label:'今日辅助识别(条)',
        percentage: 24,
        value: 120
      },
      {
        label:'有违章(个)',
        percentage: 40,
        value: 130
      },
      {
        label:'无违章(个)',
        percentage: 60,
        value: 150
      },
      ]);
const chartData = ref([]);
const statusCount = ref({});
const settingStore = useSettingStore();

const getChartData = () => {
  ranking({ type: '线路名称' })
    .then((res) => {
      if (res.success) {
        chartData.value = res.data;
        // areaName.value = res.data.map((item) => item.name);
        // xArr.value = res.data.map((item) => item.value);
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};

onMounted(() => {
  getChartData();
});

// 数字滚动速率
const duration = ref(2);
const radio2 = ref("");
const radio3 = ref("");

const dialogVisible = ref(false);

const onCloseType = async () => {
  dialogVisible.value = false;
};

const leftRadio1 = ref("外单位");

const leftRadio2 = ref("已识别的违章清单");

</script>

<style scoped lang="scss">

::v-deep(.el-dialog) {
  background-color: rgba(2, 167, 240, 0.2);;
  // height: 100%;
  // width: 100%;
  border-radius: 8px;
}
::v-deep() {
  .el-form-item__label{
    color: white;
  }
}

.dial-title{
      font-size: 14px;
    color: #FFFFFF;
    line-height: 30px;
    width: 100%;
    text-align: center;
}

.dial-sub{
  margin: auto;
  text-align: center;
}

.index-box {
  width: 100%;
  display: flex;
  min-height: calc(100% - 64px);
  justify-content: space-between;
}
//左边 右边 结构一样
.contetn_left,
.contetn_right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  width: 560px;
  box-sizing: border-box;
  flex-shrink: 0;
  margin-top: -32px;

  .contetn_right-title {
    font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    color: #02a7f0;
    display: flex;
    justify-content: end;
    align-items: center;
    margin: 8px;

  }

  .contetn_rightone {
    position: relative;
  }
  .contetn_rightonetop {
    height: calc(100% - 66px);
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #58b1ff;
      font-size: 18px;
      font-weight: 600;
      line-height: 36px;
    }
    .content {
      font-size: 16px;
      display: flex;
      // align-items: center;
      > div {
        text-align: left;
        line-height: 24px;
      }
      :first-child {
        width: 80px;
      }
      :nth-child(2) {
        width: calc(100% - 80px);
      }
    }
    .descriptions-default-content {
      display: inline-grid;
    }
    .descriptions-click {
      color: #02a7f0;
      text-decoration: underline;
    }

    ::v-deep() {
      .el-descriptions__body {
        background-color: transparent;
      }
      .el-descriptions__label {
        color: white;
        font-weight: 600;
      }
      .el-descriptions__content {
        color: white;
      }
    }
  }

  .contetn_rightonebottom {
    position: absolute;
    bottom: 0px;
    .center_radio {
      margin: 16px;
      ::v-deep() {
        .el-radio {
          border-color: #264e79;
          background-color: #16385b;
          margin-right: 8px;
        }
        .el-radio__inner {
          display: none;
        }
        .el-radio__label {
          color: #0bbeb4;
        }
        .is-checked {
          background-color: #5b8ff8;
          .el-radio__label {
            color: white;
          }
        }
      }
    }
  }

  .contetn_righttwo {
    height: calc(100% - 12px);
    .title {
      display: flex;
      font-size: 16px;
      line-height: 24px;
      :first-child {
        white-space: nowrap;
        color: #58b1ff;
        font-weight: 600;
      }
    }
  }
}
.contetn_center {
  // flex: 1;
  width: 760px;
  height: 1024;
  //   overflow-y: auto;
  // margin: 0 54px;
  //   display: flex;
  //   flex-direction: column;
  //   .top {
  //     flex: 1;
  //   }
  .toptitle {
    height: 120px;
    // background: red;
    width: 720px;
    margin: auto;
    background-image: url("@/assets/img/u41.svg");
    background-size: 100% 229px;
    background-position-y: bottom;
    // display: flex;
    // justify-content: space-between;
    padding: 0 36px;
    padding-top: 16px;
    .toptitleleft {
      width: 56px;
      height: 60px;
      background-image: url("@/assets/img/u42.png");
      background-size: 56px 60px;
      margin: auto;
      margin-top: -5px;
    }
    .toptitlecontent {
      font-weight: 700;
      font-size: 15px;
      color: #02a7f0;
      width: fit-content;
      margin: auto;
      margin-top: 8px;
    }
  }

  .rightTop {
    font-size: 13px;
    height: calc(100% - 120px);
    background-color: rgba(16, 36, 58, 0.4);
    color: #02a6ef;

    .rightTop-title{
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #02A7F0;
      margin: auto;
      width: fit-content;
      padding: 12px;
    }

    .top111 {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 12px;
      .rightTopItem {
        border: 1px white solid;
        text-align: center;
        margin: 0 8px;
        width: 120px;
        .rightTopItemTitle {
          line-height: 40px;
          font-size: 14px;
          text-align: center;
        }
        .linetop{
          border-top: 1px white solid;
        }
        .rightTopItemContent {
          line-height: 40px;
          text-align: center;
          font-weight: 700;
          font-style: normal;
          font-size: 24px;
        }
      }
    }

    .topmap{
      height: calc(100% - 144px);
      padding-top: 60px;
    }
  }

  .topstatic {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    .topstaticone {
      display: flex;
      .topstaticone1 {
        width: 95px;
        height: 36px;
        line-height: 36px;
        background-image: url("@/assets/img/u48.svg");
        background-size: 100% 100%;
        text-align: center;
      }
      .topstaticone2 {
        width: 100px;
        height: 36px;
        margin-left: -2px;
        line-height: 36px;
        text-align: center;
        background-image: url("@/assets/img/u49.svg");
        background-size: 100% 100%;
        font-weight: 700;
        font-style: normal;
        font-size: 24px;
      }
    }
  }

  .contetn_center-bottomtable {
    // flex: 1;
    height: 565px;
    // overflow: auto;
    overflow: hidden;
  }

  .topsearch {
    // padding: 0px 16px;
    .searchicon {
      width: 32px;
      height: 32px;
      border: 1px solid #02a7f0;
      border-radius: 2px;
      background-image: url("@/assets/img/u112.svg");
      background-size: 24px 24px;
      background-repeat: no-repeat;
      background-position: center center;
      cursor: pointer;
    }
    ::v-deep() {
      .el-form-item {
        margin-right: 12px;
      }
      .el-input__wrapper {
        background: #162840;
      }
      .el-select__wrapper {
        background: #162840;
      }
      .el-input__inner {
        color: white;
      }
      .el-select__selected-item {
        color: white;
      }
    }
  }
  .toptable {
    // height: 430px;
    width: 100%;
    // overflow: hidden;
    // width: calc(100% - 24px);
    // background-color: #0e3d5d;
    // margin: 0 12px;
    // border-radius: 4px;
    margin-top: 12px;
    // width: 600px;
    // padding-top: 12px;
  }

  .table-tab {
    height: 24px;
    position: relative;
  }
  .center_radio1 {
    position: absolute;
    right: 0;
    margin: 0 16px;
    margin-top: -10px;
    ::v-deep() {
      .el-radio {
        border-color: #264e79;
        background-color: #16385b;
      }
      .el-radio-button__inner {
        border-color: #264e79;
        background-color: #16385b;
        color: #0bbeb4;
      }
      .el-radio__inner {
        display: none;
      }
      .el-radio__label {
        color: #0bbeb4;
      }
      .is-checked {
        background-color: #5b8ff8;
        .el-radio__label {
          color: white;
        }
      }
    }
  }
  // justify-content: space-around;
  // .top{
  //   height: 706px;
  // }
  .center_radio {
    margin: 16px;
    ::v-deep() {
      .el-radio {
        border-color: #264e79;
        background-color: #16385b;
      }
      .el-radio__inner {
        display: none;
      }
      .el-radio__label {
        color: #0bbeb4;
      }
      .is-checked {
        background-color: #5b8ff8;
        .el-radio__label {
          color: white;
        }
      }
    }
  }
  .bottom {
    height: 210px;
    // padding: 0 16px;
    display: flex;
    margin: 16px 0px;
    justify-content: space-between;
    align-items: center;
    .contetn_center-bottom4 {
      // height: 100%;
      //   width: 230px;
      width: 43%;
      margin-right: 12px;
      // aspect-ratio: 9/9;
    }
    .contetn_center-bottom4 {
      // height: 100%;
      //   width: 230px;
      width: 57%;
      // aspect-ratio: 9/9;
    }
  }
}
.contetn_lr-item1 {
  height: 768px;
  margin-bottom: 8px;
}
.contetn_lr-item11 {
  height: 248px;
}
.contetn_lr-item2 {
  height: 460px;
  // margin-bottom: 12px;
}
.contetn_lr-item3 {
  height: 306px;
  margin-top: 8px;
  background-color: rgba(16, 36, 58, 0.4);
}
.contetn_lr-item {
  height: 310px;
}
</style>
